<template>
  <el-dialog
      v-dialogDrag
      v-loading="loading"
      append-to-body
      top="6vh"
      :width="width"
      :close-on-click-modal="false"
      :close-on-press-escape="true"
      :type="type"
      :title="title"
      :visible.sync="isVisible">
    <el-form size="mini" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="150px">
      <el-card style="margin-bottom:5px;" shadow="hover">
        <div class="clearfix cardHeader" slot="header">
          <span><i class="el-icon-star-on"></i>基本信息</span>
        </div>
        <el-row type="flex" class="row-bg">
          <el-col :span="24">
            <el-form-item label="学生信息" prop="studentId">
              <el-input clearable v-model="dataForm.studentId" placeholder="学生信息" maxlength="50" show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg">
          <el-col :span="24">
            <el-form-item label="姓名" prop="testerName">
              <el-input clearable v-model="dataForm.testerName" placeholder="姓名" maxlength="50" show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg">
          <el-col :span="24">
            <el-form-item label="学号" prop="testerNuber">
              <el-input clearable v-model="dataForm.testerNuber" placeholder="学号" maxlength="50" show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg">
          <el-col :span="24">
            <el-form-item label="身份证号" prop="idCard">
              <el-input clearable v-model="dataForm.idCard" placeholder="身份证号" maxlength="50" show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg">
          <el-col :span="24">
            <el-form-item label="头像" prop="avatar">
              <el-input clearable v-model="dataForm.avatar" placeholder="头像" maxlength="50" show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg">
          <el-col :span="24">
            <el-form-item label="性别 M: 男 F: 女" prop="gender">
              <el-input clearable v-model="dataForm.gender" placeholder="性别 M: 男 F: 女" maxlength="50" show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg">
          <el-col :span="24">
            <el-form-item label="学校" prop="school">
              <el-input clearable v-model="dataForm.school" placeholder="学校" maxlength="50" show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg">
          <el-col :span="24">
            <el-form-item label="年级" prop="grade">
              <el-input clearable v-model="dataForm.grade" placeholder="年级" maxlength="50" show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg">
          <el-col :span="24">
            <el-form-item label="班级" prop="clazz">
              <el-input clearable v-model="dataForm.clazz" placeholder="班级" maxlength="50" show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg">
          <el-col :span="24">
            <el-form-item label="项目code" prop="itemCode">
              <el-input clearable v-model="dataForm.itemCode" placeholder="项目code" maxlength="50" show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg">
          <el-col :span="24">
            <el-form-item label="成绩" prop="score">
              <el-input clearable v-model="dataForm.score" placeholder="成绩"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg">
          <el-col :span="24">
            <el-form-item label="子增项成绩(例如：视力)" prop="subscore">
              <el-input clearable v-model="dataForm.subscore" placeholder="子增项成绩(例如：视力)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg">
          <el-col :span="24">
            <el-form-item label="运动项目单位" prop="unit">
              <el-input clearable v-model="dataForm.unit" placeholder="运动项目单位" maxlength="50" show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg">
          <el-col :span="24">
            <el-form-item label="运动时长 单位：秒" prop="duration">
              <el-input clearable v-model="dataForm.duration" placeholder="运动时长 单位：秒" maxlength="50" show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg">
          <el-col :span="24">
            <el-form-item label="运动开始时间" prop="startTime">
              <el-input clearable v-model="dataForm.startTime" placeholder="运动开始时间" maxlength="50" show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg">
          <el-col :span="24">
            <el-form-item label="运动结束时间" prop="endTime">
              <el-input clearable v-model="dataForm.endTime" placeholder="运动结束时间" maxlength="50" show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="isVisible = false">取消</el-button>
      <el-button size="small" type="primary" @click="submitForm()" :loading="loading">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import '@/utils/directives.js'
  import { getScreenWidth } from '@/utils'
  export default {
    components: {  },
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      type: {
        type: String,
        default: 'add'
      }
    },
    data () {
      return {
        dataForm: this.initDataForm(),
        loading: false,
        width: getScreenWidth(),
        dataRule: {
        }
      }
    },
    computed: {
      isVisible: {
        get() {
          return this.dialogVisible
        },
        set() {
          this.close()
          this.reset()
        }
      },
      title() {
        return this.$t('common.' + this.type)
      }
    },
    watch: {},
    mounted () {
      window.onresize = () => {
        return (() => {
          this.width = getScreenWidth()
        })()
      }
    },
    methods: {
      initDataForm() {
        return {
          id: '',
          studentId: '',
          testerName: '',
          testerNuber: '',
          idCard: '',
          avatar: '',
          gender: '',
          school: '',
          grade: '',
          clazz: '',
          itemCode: '',
          score: '',
          subscore: '',
          unit: '',
          duration: '',
          startTime: '',
          endTime: ''
        }
      },
      setDataForm(val) {
        if (val) {
          this.dataForm = { ...val }
        }
      },
      close() {
        this.$emit('close')
      },
      reset() {
        // 先清除校验，再清除表单
        this.$refs.dataForm.clearValidate()
        this.$refs.dataForm.resetFields()
        this.dataForm = this.initDataForm()
      },
      submitForm() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            if (this.type === 'update') {
              this.update()
            } else {
              this.save()
            }
          } else {
            return false
          }
        })
      },
      save() {
        this.loading = true
        this.$http({
          url: this.$http.requestUrl(`/sport/sportapi/save`),
          method: 'post',
          data: this.$http.requestData(this.dataForm)
        }).then(response => {
          const res = response.data
          if (res && res.code === 0) {
            this.isVisible = false
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.$emit('success')
          } else {
            this.$message.error(res.msg)
          }
          this.loading = false
        })
      },
      update() {
        this.loading = true
        this.$http({
          url: this.$http.requestUrl(`/sport/sportapi/update`),
          method: 'post',
          data: this.$http.requestData(this.dataForm)
        }).then(response => {
          const res = response.data
          if (res && res.code === 0) {
            this.isVisible = false
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.$emit('success')
          } else {
            this.$message.error(res.msg)
          }
          this.loading = false
        })
      }
    }
  }
</script>